<template>
  <el-row>
    <el-col :span="2" :offset="20">
    <el-menu router mode="horizontal">
      <el-submenu index="1">
        <template #title>
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        </template>
          <el-menu-item @click="open">修改密码</el-menu-item>
          <el-menu-item @click="logout">退出</el-menu-item>
      </el-submenu>
    </el-menu>
    </el-col>
  </el-row>
  <br>
  <el-row>
    <el-col :sm=3>
      <div id="hidden" :class="isCollapsed==false?'hidden':'show'">
        <el-button round @click="hidden">
          <i :class="isCollapsed==false?'el-icon-arrow-left':'el-icon-arrow-right'"></i>
        </el-button>
      </div>
      <br>
      <el-menu router :default-active="myRounter" :collapse="isCollapsed">
        <el-menu-item index="blogs">
          <i class="el-icon-document"></i>
          <template #title>
            <span>文章管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="types">
          <i class="el-icon-s-grid"></i>
          <template #title>
            <span>分类管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="tags">
          <i class="el-icon-collection-tag"></i>
          <template #title>
            <span>标签管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="friendLinks">
          <i class="el-icon-link"></i>
          <template #title>
            <span>友链管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="comments">
          <i class="el-icon-s-comment"></i>
          <template #title>
            <span>评论管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="setting">
          <i class="el-icon-setting"></i>
          <template #title>
            <span>博客设置</span>
          </template>
        </el-menu-item>
  </el-menu>
    </el-col>
    <el-col :sm={span:18,offset:1}>
      <router-view></router-view>
    </el-col>
  </el-row>
</template>

<script>
import Header from "../views/admin/Header";
import md5 from 'js-md5'
import axios from 'axios'
export default {
  name: "a-index",
  components: {Header},
  data(){
    return{
      isCollapsed: false,
      myRounter: this.$router.currentRoute._rawValue.name,
      adminInfo: {
        user: null,
        password: null
      }
    }
  },
  methods: {
    hidden: function (){
      this.isCollapsed = !(this.isCollapsed)
      if ( this.isCollapsed == true){
      }
    },
    open: function (){
        this.$prompt('请输入新的密码','提示',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then( ({value}) => {
          this.adminInfo.password = md5(value);
          this.adminInfo.user = sessionStorage.getItem("user");
          axios.post('/admin/modify',this.adminInfo).then( (res) => {
            if ( res.data === true){
              this.$message.success("修改成功");
              this.$router.push({
                path: "/login"
              })
            }
            else
              this.$message.error("修改失败")
          })
        })
    },
    logout: function (){
      sessionStorage.removeItem("user");
      localStorage.removeItem("password");
      this.$router.push({
        path: "/login"
      })
    }
  }
}
</script>

<style scoped>
a {
  text-decoration: none;
}
.router-link-active {
  text-decoration: none;
  /*color: #64b3ff;*/
}
.hidden {
  text-align: center
}
</style>